<template>
    <div class="table">
        <el-table :data="props.list" stripe style="width: 100%">
            <el-table-column label="商品信息" min-width="200">
                <template #default="{ row }">
                    <div class="goods_info">
                        <div class="goods_l">
                            <el-image :src="row.goodsImg" fit="cover">
                                <template #error>
                                    <div class="img_error">
                                        <el-icon><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                        <div class="goods_r">
                            <div class="goods_r_text">{{ row.goodsTitle }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sellPrice" label="价格" width="180" />
            <el-table-column label="佣金" width="250">
                <template #default="{ row }">
                    <div v-for="item in row.brokerageList" :key="item.rate">
                        {{ item.levelName }}: {{ item.rate }}%<span v-if="item.inviteRate"
                            >; {{ item.inviteRate }}%</span
                        >
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="shopName" label="来源店铺" width="200" />
            <el-table-column prop="createdAt" label="添加时间" width="180" />
            <el-table-column prop="date" label="操作" width="150">
                <template #default="{ row }">
                    <el-button v-auth="'distribution_goods:add_set'" size="small" @click="onSetting(row)">
                        设置
                    </el-button>
                    <el-button v-auth="'distribution_goods:remove'" size="small" @click="onRemove(row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="state.show" title="提示" width="400px">
            <div class="remove">确定将商品移除分销列表吗？</div>
            <template #footer>
                <el-button @click="state.show = false">取 消</el-button>
                <el-button type="primary" @click="onRemoveConfirm">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { reactive } from 'vue';

const props = defineProps({
    list: { type: Array, default: () => [] }
});
const emit = defineEmits(['setting', 'remove']);
const state = reactive({
    show: false,
    row: {}
});

const onSetting = row => {
    emit('setting', row);
};
const onRemove = row => {
    state.show = true;
    state.row = row;
};
const onRemoveConfirm = () => {
    emit('remove', state.row);
    state.show = false;
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';
.table {
    .goods_info {
        display: flex;
        .goods_l {
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: flex;
            place-items: center;
            .el-image {
                width: 100%;
                height: 100%;
            }
            .img_error {
                font-size: 36px;
            }
        }
        .goods_r {
            flex: 1;
            display: flex;
            align-items: center;
            height: 36px;
            padding-left: 8px;
            .goods_r_text {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #33302d;
                line-height: 18px;
                @include text-ellipsis(2);
            }
        }
    }
}
.remove {
    text-align: center;
    line-height: 50px;
}
</style>
